<template>
  <div class="iule-select-group" :style="{'height':height}">
    <label  :for="item.title" :class="{
    'iule-select-item-checked':item.id === currentValue,
    'iule-select-item':item.id !== currentValue
    }" v-for="item in items" :key="item.id">
      <input type="radio" name="type" :id="item.title" :value="item.id" v-model="currentValue" checked hidden/>
      <div class="item-title">{{item.title}}</div>
      <div class="item-sub-title">{{item.subtitle}}</div>
    </label>
  </div>
</template>

<script>
export default {
  name: 'IuleSelectGroup',
  data () {
    return {
      currentValue: 0
    }
  },
  props: {
    value: {
      type: Number,
      default: 0
    },
    height: {
      default: '4.5rem',
      type: String
    },
    items: {
      default: () => [
        {
          id: 0,
          title: '全包',
          subtitle: '平均投注所有结果'
        },
        {
          id: 1,
          title: '红',
          subtitle: '所有含红球的结果'
        },
        {
          id: 2,
          title: '黄',
          subtitle: '所有含黄球的结果'
        },
        {
          id: 3,
          title: '蓝',
          subtitle: '所有含蓝球的结果'
        },
        {
          id: 4,
          title: '单',
          subtitle: '结果中不少于两种球'
        },
        {
          id: 5,
          title: '双',
          subtitle: '结果中有两个同色球'
        }
      ]
    }
  },
  created () {
    this.$emit('afterSelect', this.currentValue)
  },
  methods: {
    noSelect () {
      console.log('ssss')
    }
  },
  watch: {
    currentValue (val) {
      this.$emit('afterSelect', val)
    }
  }

}
</script>

<style scoped>
  button {
    border: 0rem;
  }
  .input {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .item-title {
    font-size:0.39rem;
    font-weight:bold;
  }
  .item-sub-title {
    font-size:0.23rem;
    -webkit-text-size-adjust: none;
    color:rgba(153,153,153,1);
  }
  .iule-select-item {
    width:3.0rem;
    height:1.75rem;
    color:rgba(64,64,64,1);
    background:rgba(245,245,245,1);
    border-radius:0.17rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  .iule-select-item-checked {
    width:3rem;
    height:1.75rem;
    color:rgba(64,64,64,1);
    background:url("../assets/select_bg@2x.png");
    background-size: cover;
    border-radius:0.17rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  .iule-select-group {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    flex-wrap: wrap;
    align-items: center;
  }
</style>
